<template>
  <el-splitter>
    <el-splitter-panel collapsible size="20%">
      <el-splitter layout="vertical">
        <el-splitter-panel collapsible size="50">
          <div class="flex-center hfull cursor-pointer pl5" @click="router.push('/')">
            <img src="@/assets/imgs/logo.png" class="w-35px" />
            <span>SEED应用开发平台</span>
          </div>
        </el-splitter-panel>
        <el-splitter-panel>
          <NavTree />
        </el-splitter-panel>
      </el-splitter>
    </el-splitter-panel>
    <el-splitter-panel>
      <el-splitter layout="vertical">
        <el-splitter-panel collapsible size="50" class="flex justify-between">
          <Breadcrumb />
          <MenuBar />
          <div class="flex justify-end gap2">
            <MicroDropdown />
            <ElDropdown trigger="click">
              <div class="flex items-center gap2">
                <Avatar width="25px" :filepath="user.avatar" class="rounded-50%"/>
                <ElButton link>
                  <ElText truncated class="max-w-125px!">{{ user.name }}</ElText>
                </ElButton>
              </div>
              <template #dropdown>
                <ElDropdownMenu>
                  <ElDropdownItem>
                    <div @click="myApp">我的应用</div>
                  </ElDropdownItem>
                  <ElDropdownItem>
                    <div @click="logout">退出系统</div>
                  </ElDropdownItem>
                </ElDropdownMenu>
              </template>
            </ElDropdown>
          </div>
        </el-splitter-panel>
        <el-splitter-panel class="p5px overflow-x-hidden">
          <component :is="component" v-bind="componentProps" />
        </el-splitter-panel>
      </el-splitter>
    </el-splitter-panel>
  </el-splitter>
</template>
<script setup lang="ts">
  import { ElSplitter, ElSplitterPanel } from 'element-plus';
  import { ElDropdown, ElDropdownMenu, ElDropdownItem, ElButton, ElText } from 'element-plus';
  import { Avatar } from '@/components/avatar'
  import { router } from '@/router'
  import { useUserStore } from '@/store'
  import feedback from '@/utils/feedback';
  import { logoutApi } from '@/api';
  import { NavTree } from '@/views/components/AppTree';
  import { MenuBar } from '@/views/components/MenuBar';
  import { Breadcrumb } from '@/views/components/Breadcrumb';
  import { MicroDropdown } from '@/views/components/MicroDropdown';
  import { shallowRef, watch } from 'vue';
  import { AppEditor, AppList } from '@/views/components/MyApp';
  import { MicroEditor } from '@/views/components/MicroEditor';
  import { ActionEditor } from '@/views/components/ActionEditor';
  import { HomeEditor } from '@/views/components/HomeEditor';
  import { SeedEditor } from '@/views/components/SeedEditor';
  import { ColumnEditor } from '@/views/components/ColumnEditor';
  import { ActionElementEditor } from '../../ActionElementEditor';
  import { breadcrumbs, currentMicro, setBreadcrumbs } from '@/views/seed-dev';
  import { StatEditor } from '../../StatEditor';
  import { RelationEditor } from '../../RelationEditor';
  import { RootEditor } from '../../RootEditor';
  import { LoginEditor } from '@/views/components/LoginEditor';
  import { DefaultHomeEditor } from '../../DefaultHomeEditor';

  const userStore = useUserStore()
  const user = userStore.getLoginInfo()
  const component = shallowRef()
  const componentProps = shallowRef()
  watch(() => breadcrumbs.value, (val) => {
    if(val && val.length > 0) {
      const last = val[val.length - 1]
      if(['applist','app','login','default-home','root','error','redirect', 'micro'].includes(last.type)) {
        switch(last.type) {
          case 'applist':
            component.value = AppList
            componentProps.value = void 0
            break
          case 'app':
            component.value = AppEditor
            componentProps.value = void 0
            break
          case 'micro':
            component.value = MicroEditor
            componentProps.value = { microName: currentMicro.value }
            break
          case 'login':
            component.value = LoginEditor
            componentProps.value = void 0
            break
          case 'default-home':            
            component.value = DefaultHomeEditor
            componentProps.value = void 0
            break
          case 'root':
            component.value = RootEditor
            componentProps.value = void 0
            break
          default: // 'error'|'redirect'
            component.value = void 0
            componentProps.value = void 0
        }
      } else {
        const { actionName, seedName, homeName, columnName, statName, cross } = last.node.data
        const key = last.node.data.id
        console.log('key', key)
        switch(last.type) {
          case 'action':
            component.value = ActionEditor
            componentProps.value = { actionName, key }
            break
          case 'action-column':
            component.value = ActionElementEditor
            componentProps.value = {actionName, declare: columnName, key}
            break
          case 'action-stat':
            component.value = StatEditor
            componentProps.value = {actionName, statName, key}
            break
          case 'home':
            component.value = HomeEditor
            componentProps.value = { homeName, key }
            break
          case 'seed':
            component.value = SeedEditor
            componentProps.value = { seedName, key }
            break
          case 'seed-action':
            component.value = ActionEditor
            componentProps.value = { seedName, actionName, key }
            break
          case 'seed-action-column':
            component.value = ActionElementEditor
            componentProps.value = { seedName, actionName, declare: columnName, key }
            break
          case 'seed-action-stat':
            component.value = StatEditor
            componentProps.value = { seedName, actionName, statName, key }
            break
          case 'seed-column':
            component.value = ColumnEditor
            componentProps.value = { seedName, columnName, key }
            break
          case 'seed-stat':
            component.value = StatEditor
            componentProps.value = { seedName, statName, key }
            break
          case 'seed-has-one':
            component.value = RelationEditor
            componentProps.value = { seedName, type: 'hasOne', cross, key }
            break
          case 'seed-belongs-to':
            component.value = RelationEditor
            componentProps.value = { seedName, type: 'belongsTo', cross, key }
            break
          case 'seed-has-many':
            component.value = RelationEditor
            componentProps.value = { seedName, type: 'hasMany', cross, key }
            break
          case 'seed-habtm':
            component.value = RelationEditor
            componentProps.value = { seedName, type: 'habtm', cross, key }
            break
        }
      }
    } else {
      component.value = void 0
      componentProps.value = void 0
    }
  })

  function myApp() {
    setBreadcrumbs('applist')
  }

  async function logout() {
    try {
      await feedback.confirm('确定要退出系统吗?')
      await logoutApi()
      userStore.logout()
      router.replace('/login')
    } catch(e) {
      //
    }
  }
</script>
